<template>
  <div style="padding-bottom:100px;">
    <div v-title>查看电子协议</div>
    <div class="hole">
      <h4>电子协议</h4>
      <div class="rightLine">
        <div class="boldFont">甲 方（出借人）：</div>
        <div>黄建耀</div>
      </div>
      <div class="rightLine">
        <div>身份证号码：</div>
        <div>33250119830925653X</div>
      </div>
      <div class="rightLine">
        <div>住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</div>
        <div>浙江省宁波市鄞州区姚隘路777号</div>
      </div>
      <div class="rightLine">
        <div>联&nbsp;系&nbsp;方&nbsp;式：</div>
        <div>18858455569</div>
      </div>
      <div class="rightLine marginTop">
        <div class="boldFont">乙 方（借款人）：</div>
        <div>{{memberData.CarOwner}}</div>
      </div>
      <div class="rightLine">
        <div>身份证号码：</div>
        <div>{{memberData.IDNumber}}</div>
      </div>
      <div class="rightLine">
        <div>住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：</div>
        <div>{{memberData.ProvinceName}}{{memberData.CityName}}{{memberData.DetailedAddress}}</div>
      </div>
      <div class="rightLine marginBottom">
        <div>联&nbsp;系&nbsp;方&nbsp;式：</div>
        <div>{{memberData.ContactPhone}}</div>
      </div>
      <div class="PictureImg">
        <div class="rightLine">
          <div class="boldFont">丙 方（居间人）：</div>
          <div>宁波百锦信息技术有限公司</div>
        </div>
        <div class="rightLine">
          <div>法定代表人：</div>
          <div>李娇娇</div>
        </div>
        <div class="rightLine">
          <div>住&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;所：</div>
          <div>浙江省宁波市高新区扬帆路999弄1号2-4</div>
        </div>
        <div class="rightLine">
          <div>联&nbsp;系&nbsp;方&nbsp;式：</div>
          <div>400-170-1235</div>
        </div>
      </div>

      <div class="textBox">
        <br>
        <br> 根据《中华人民共和国合同法》等相关法律法规，经甲乙丙三方协商一致，就甲方向乙方提供借款、用于购置车辆保险等相关事宜达成如下协议：
        <br>
        <br> 第一条 服务内容
        <br> 1、甲方为乙方提供借款本金，由乙方在丙方公众号中购置车辆保险；该借款本金由甲方按照乙方的选择，直接支付给保险公司为乙方购置保险，形成保单。
        <br> 2、保险种类仅限于车辆商业险种，保险公司、保额等由乙方自行选择。
        <br> 3、本合同自签署（包括乙方在公众号中注册成功即视为同意本协议所有条款、视为同意签署）之日起生效，至本合同约定情形出现时终止。
        <br>

        <br> 第二条 借款本金
        <br> 1、乙方向甲方借款本金数额以乙方在丙方公众号中自行选择的车辆保险形成的金额为准。
        <br> 2、乙方在丙方公众号中选择贷款购买车辆保险时形成的后台文件，包括但不限于借款金额、保险公司、投保车辆信息、还款方式、还款期限、还款账户、联系方式等均视为本合同条款，须甲乙丙三方遵守。
        <br> 3、乙方授权甲方在指定账户中直接划款当期应当归还的借款本金。
        <br> 4、以下信息将根据乙方在系统中的选择自动生成，乙方须确保准确、无误：
        <br>
        <div class="AutomaticBox">
          <van-row class="allStyle colorTitle">
            <van-col span="8">车辆所有权人</van-col>
            <van-col span="8">车牌号码</van-col>
            <van-col span="8">车架识别号</van-col>
          </van-row>
          <van-row class="allStyle">
            <van-col span="8">{{OrderData.CarOwner}}</van-col>
            <van-col span="8">{{OrderData.PlateNumber}}</van-col>
            <van-col span="8">{{OrderData.VIN}}</van-col>
          </van-row>
          <van-row class="allStyle colorTitle">
            <van-col span="8">保险公司名称</van-col>
            <van-col span="8">商业保险保费</van-col>
            <van-col span="8">有效联系方式</van-col>
          </van-row>
          <van-row class="allStyle">
            <van-col span="8">{{OrderData.InsuranceName}}</van-col>
            <van-col span="8">{{OrderData.StagingMoney}}</van-col>
            <van-col span="8">{{OrderData.ContactPhone}}</van-col>
          </van-row>
          <van-row class="allStyle lastBottom colorTitle">
            <van-col span="8">备注</van-col>
            <van-col span="16">没有备注</van-col>
          </van-row>
        </div>
        <br> 第三条 三方的权利、义务
        <br> 1、甲方作为投保人，乙方车辆作为被保险人。
        <br> 2、乙方选择在丙方公众号中向甲方借款购置车辆保险时，应当如实向甲丙方提供准确信息，包括但不限于姓名、身份证号、有效的联系电话、地址等。
        <br> 3、甲方有权按照本协议约定事项单方面解除为乙方投保的车辆商业保险合同，退保费用直接划款至甲方指定账户；当乙方出现逾期还款时，甲方享有向乙方收取违约金的权利。
        <br> 4、丙方有权按照本协议约定向乙方收取居间服务费的权利。
        <br>

        <br> 第四条 还款方式及违约责任
        <br> 1、乙方选择在丙方公众号中向甲方借款购置车辆保险时，同时可选择不同的还款期限向甲方归还借款：
        <br> （1）还款期限分为3个月、6个月、9个月和12个月等额本息方式供乙方自行选择，但一旦选择后不得变更。
        <br> （2）乙方选择3个月或6个月还款期限时，甲方不收取任何利息；乙方选择9个月或12个月时，甲方每月按照乙方借款总金额的1%收取当期利息。
        <br> 2、如果乙方在规定的最后还款期限未及时归还甲方上述借款，即出现逾期情况时：
        <br> （1）乙方可以选择继续按照已选择的还款期数、金额继续向甲方归还借款，但须向甲方承担违约金，违约金计算方式如下：违约金=（当期应当归还的借款本息*1‰*逾期天数）+50元；
        <br> （2）乙方可以选择不再继续按照已选择的还款期数、金额向甲方归还借款，
        <br> 此时甲方作为投保人，可以单方面解除已经为乙方投保的车辆商业保险，且已经归还的借款本金不再退还。
        <br> （3）乙方出现逾期时，经甲或丙以短信或电话等方式通知乙方逾期情况时，乙方3日内仍无任何意思表示时，视为本条第2款第（2）种情形。
        <br> 3、以下信息将根据乙方在系统中的选择自动生成：
        <br>
        <div class="AutomaticBox">
          <van-row class="allStyle colorTitle">
            <van-col span="8">借款总额</van-col>
            <van-col span="8">还款期限</van-col>
            <van-col span="8">首次还款日</van-col>
          </van-row>
          <van-row class="allStyle">
            <van-col span="8">{{OrderData.StagingMoney}}</van-col>
            <van-col span="8">{{OrderData.PeriodsNumber}}</van-col>
            <van-col span="8">{{memberData.AddTime | Sdate }}</van-col>
          </van-row>
          <van-row class="allStyle colorTitle">
            <van-col span="8">当期利息</van-col>
            <van-col span="8">每期应还本息</van-col>
            <van-col span="8">空白</van-col>
          </van-row>
          <van-row class="allStyle lastBottom">
            <van-col span="8">{{NowDetail.ServiceCharge}}</van-col>
            <van-col span="8">{{((OrderData.OrderAmount-OrderData.MustMoney)/OrderData.PeriodsNumber) | NumFix}}</van-col>
            <van-col span="8">空白</van-col>
          </van-row>
        </div>
        <br> 第五条 特殊约定
        <br> 1、甲方按照本协议单方解除为乙方投保的车辆商业保险后，甲方应当向乙方履行告知义务，即通过乙方自行提供的电话号码以短信或致电形式通知，该通知以成功发送或接通时视为通知成功。
        <br> 2、甲方按照本协议单方解除为乙方投保的车辆商业保险后，乙方发生交通事故、车辆损坏等类似情形时，与甲丙无关，甲丙无须承担任何法律责任。
        <br> 3、乙方提供的信息发生变化时，须三日内书面通知甲方，该信息包括但不限于联系电话、住址、还款账户等，以及其他可能影响偿债能力的事项。
        <br> 4、如因不可抗力等因素，致使本合同无法履行的，甲方有权单方面解除本合同，不可抗力因素包括但不限于地震、洪水、国家政策等。
        <br>

        <br> 第六条 争议解决方式
        <br> 1、本合同未尽事宜，由双方协商解决。如协商不成，则向丙方所在地人民法院提起诉讼。
        <br> 2、因一方违约造成守约方通过司法途径解决双方争议的，违约方应向守约方承担包括但不限于因维权而产生的诉讼费（案件受理费、申请费）、保全费、律师服务费、差旅费等。
        <br>

        <br> 第七条 附则
        <br> 本合同在乙方于公众号中注册时自动生成，乙方选择同意即视为认可本合同所有条款。
        <br> …………………………………………………………………………………………
        <br>
        <div class="CodeBox NameIMG">
          <div>甲 方（出借人）：</div>
          <div>日期：{{memberData.AddTime | Sdate }}</div>
          <img src="../image/NameImg.png" style="width:100px">
        </div>
        <div class="CodeBox">
          <div>乙 方（借款人）：{{memberData.CarOwner}}</div>
          <div>日期：{{memberData.AddTime | Sdate }}</div>
        </div>
        <div class="CodeBox">
          <div>丙 方（居间人）：</div>
          <div>日期：{{memberData.AddTime | Sdate }}</div>
          <img src="../image/baijingImg.png" style="width:100px">
        </div>
      </div>
    </div>
    <van-checkbox v-model="checked" class="agree">我已同意该电子协议与
      <span @click="$router.push('/Agreement')" style="color: #2491ff;text-decoration: underline;">保险条款</span>
    </van-checkbox>
    <div class="bottom">
      <div class="case" @click="quxiao()">再考虑下</div>
      <div class="next" @click="pays()" v-show="twice == false">确认支付</div>
      <div class="next" v-show="twice == true">
        <van-loading type="circle" color="black" style="display: inline-block; margin-right: 10px; top: -2px;" />等待中...</div>
    </div>
  </div>
</template>
<script>
  import api from '../fetch/api.js';
  import {
    Checkbox,
    CheckboxGroup,
    Toast,
    Row,
    Col,
    Loading,
    Popup,
    Lazyload,
  } from 'vant';
  export default {
    components: {
      [Checkbox.name]: Checkbox,
      [CheckboxGroup.name]: CheckboxGroup,
      [Toast.name]: Toast,
      [Row.name]: Row,
      [Col.name]: Col,
      [Loading.name]: Loading,
      [Popup.name]: Popup,
      [Lazyload.name]: Lazyload,
    },
    data() {
      return {
        checked: false,
        memberData: '',
        twice: false,
        OrderData: {
          CarOwner: 0,
          PlateNumber: 0,
          VIN: 0,
          InsuranceName: 0,
          ContactPhone: 0,
          StagingMoney: 0,
          PeriodsNumber: 0,
          MemberName: '',
          IDNumber: '',
          OrderAmount: '',
        },
        GetModel: '',
        NowDetail: {
          StartPayTime: 0,
          ServiceCharge: 0,
          Amount: 0
        },
        allPrice: 0,
        show: false,
        imageList: [
          "../image/Agreement/001.jpg",
        ]
      }
    },
    filters: {
      Sdate(val) {
        val = String(val).split(' ')[0]
        return val
      },
      NumFix(val) {
        val = val.toFixed(2)
        return val
      }
    },
    created() {
      this.getListModel();
      this.getOne();
      this.getMembenr()
    },
    methods: {
      getMembenr() {
        api.GetModel().then(res => {
          this.GetModel = res
        })
      },
      getListModel() {
        api.Post('Order/PolicyOrder/GetOneModel', {
          ID: this.$route.params.id
        }).then(res => {
          this.memberData = res;
          this.OrderData.PlateNumber = res.PlateNumber;
          this.OrderData.CarOwner = res.CarOwner;
          this.OrderData.VIN = res.VIN;
          this.OrderData.InsuranceName = res.InsuranceName;
          this.OrderData.ContactPhone = res.ContactPhone;
          this.OrderData.StagingMoney = res.StagingMoney;
          this.OrderData.PeriodsNumber = res.PeriodsNumber;
          this.OrderData.OrderAmount = res.OrderAmount;
          this.OrderData.MustMoney = res.MustMoney;
          //  if(res.IsMust==0){//0是 1否
          //      this.allPrice=res.StagingMoney-res.MustMoney
          //  }else{
          //    this.allPrice=this.StagingMoney
          //  }
        })
      },
      getOne() {
        api.Post('Order/StagingDetail/GetNowStagingDetail', {
          PolicyID: this.$route.params.id,
          PeriodsCount: this.$route.params.count
        }).then(res => {
          this.NowDetail.NowDetail = res.NowDetail;
          this.NowDetail.ServiceCharge = res.ServiceCharge;
          //   this.NowDetail.Amount=res.Amount
        })
      },
      pays() {
        if (this.checked == false) {
          Toast("请先阅读并同意电子协议！");
          return;
        }
        this.twice = true
        if (this.$route.params.who == 0) {
          //商业险
          api.Post('Order/PolicyOrder/AggreeContract', {
              ID: this.$route.params.id
            })
            .then(res => {
              if (res.Success == true) {
                var _this = this;
                _this.$router.push('/FQPay/' + this.$route.params.id + '/1')
              } else {
                this.twice = false
              }
            })
        } else {
          //交强险
          api.Post('Insurance/PHInsuranceOrder/AggreeContract', {
              ID: this.$route.params.id
            })
            .then(res => {
              if (res.Success == true) {
                this.$router.push('/FQPay/' + this.$route.params.id + '/-1')
              } else {
                this.twice = false
              }
            })
        }
      },
      quxiao() {
        this.$router.push('/BaiFenCenter')
      },
    }
  }

</script>

<style>
  .van-checkbox__control:checked+.van-icon-success {
    border-color: #2491ff;
    background-color: #2491ff;
  }

  @media only screen and (max-width: 320px) {
    .rightLine div:first-child {
      width: 39%;
      line-height: 37px;
    }
    .rightLine div:last-child {
      width: 61%;
      height: 25px;
      border-bottom: 1px solid #333;
      line-height: 37px;
    }
  }

  @media only screen and (min-width: 320px) {
    .rightLine div:first-child {
      width: 39%;
      line-height: 37px;
    }
    .rightLine div:last-child {
      width: 61%;
      height: 25px;
      border-bottom: 1px solid #333;
      line-height: 37px;
    }
  }

</style>
<style scoped>
  .popup>img {
    width: 100%;
  }

  .bottom {
    position: fixed;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background: #fff;

    border-top: 1px solid #eee;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .hole {
    background: #fff;
    display: block;
    padding: 20px 3% 0 3%;
    overflow: hidden
  }

  .hole h4 {
    margin: 8px 0 16px 0;
    text-align: center
  }

  .textBox {
    font-size: 14px;
    margin-bottom: 50px;
  }

  .case {
    width: 30%;
    float: left;
    line-height: 60px;
    background: #fff;
    color: #666;
    text-align: center;
    font-size: 16px;
    height: 60px;
  }

  .rightLine {
    clear: both;
    overflow: hidden
  }

  .rightLine div {
    float: left;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
  }

  .boldFont {
    font-weight: 600;
  }

  .rightLine div:first-child {
    width: 33%;
    line-height: 37px;
  }

  .rightLine div:last-child {
    width: 67%;
    height: 25px;
    border-bottom: 1px solid #333;
    line-height: 37px;
  }


  .marginTop {
    margin-top: 20px;
  }

  .marginBottom {
    margin-bottom: 20px;
  }

  .next {
    width: 70%;
    float: right;
    line-height: 60px;
    background: #2491ff;
    color: #fff;
    text-align: center;
    font-size: 16px;
    height: 60px;
  }

  .agree {
    width: 95%;
    height: 40px;
    background: #fff;
    left: 0;
    line-height: 40px;
    padding-left: 5%;
    background: #f5f5f5;
    overflow: hidden;
  }

  .AutomaticBox {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #333;
    font-size: 14px;
    overflow: hidden;
    color: #ca1b25;
    font-weight: bold;
  }

  .AutomaticBox .allStyle {
    text-align: center;
    border-bottom: 1px solid #333;
    line-height: 25px;
  }

  .AutomaticBox .allStyle div {
    border-right: 1px solid #333;
  }

  .AutomaticBox .allStyle div:last-child {
    border-right: none
  }

  .AutomaticBox .lastBottom {
    border-bottom: none
  }

  .AutomaticBox .colorTitle {
    color: #666;
    font-size: 12px;
    font-weight: normal
  }

  .CodeBox img {
    position: absolute;
    top: -33px;
    left: 34%;
  }

  .CodeBox {
    position: relative;
    margin-top: 20px;
    height: 80px;
  }

  .CodeBox div {
    line-height: 25px;
  }

  .NameIMG img {
    top: -12px;
    left: 36%;
  }

</style>
